<template>
  <div class="login-container">
    <div class="login-box">
      <el-row :gutter="2">
        <el-col :span="15">
          <div class="grid-content">
            <el-carousel height="500px">
              <el-carousel-item v-for="item in banners" :key="item">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="item"
                  fit="fill"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
            <!-- logo -->
            <div class="sys-logo">
              <el-image
                :src="require('../assets/images/1.png')"
                style="width: 80px; height: 80px"
              ></el-image>
            </div>

            <!-- 系统标题 -->
            <h4>副中心枢纽勘察总体管理系统</h4>
            <!-- <h4>北运河廊坊段旅游通航工程</h4> -->
            <!-- 登录表单区域 -->
            <div style="width: 100%; padding: 0px 20px; box-sizing: border-box">
              <el-form
                v-loading="loading"
                element-loading-text="登录中......"
                element-loading-spinner="el-icon-loading"
                :model="logindata"
                status-icon
                :rules="rules"
                ref="loginForm"
              >
                <el-form-item prop="username">
                  <el-input
                    prefix-icon="el-icon-user-solid"
                    clearable
                    placeholder="用户名"
                    type="text"
                    v-model="logindata.username"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    prefix-icon="el-icon-s-flag"
                    clearable
                    placeholder="密码"
                    type="password"
                    v-model="logindata.password"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="identifydata">
                  <el-input
                    placeholder="验证码(4位)"
                    v-model="logindata.identifydata"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <div class="identifybox">
                    <div @click="refreshCode">
                      <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                    <el-button @click="refreshCode" type="text" class="textbtn"
                      >看不清，换一张</el-button
                    >
                  </div>
                </el-form-item>
                <el-form-item class="btns">
                  <el-button type="primary" @click="submitForm(logindata)"
                    >登录</el-button
                  >
                  <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
              </el-form>
              <div class="brower-tip">
                *推荐使用谷歌、火狐、360浏览器极速模式
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import SIdentify from "@/components/base/identify.vue";

export default {
  components: { SIdentify },
  data() {
    // 验证码自定义验证规则
    const validateVerifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.identifyCode) {
        console.log("validateVerifycode:", value);
        callback(new Error("验证码不正确!"));
      } else {
        callback();
      }
    };

    return {
      //轮播图数据
      banners: [
        require("../assets/images/banner-1.png"),
        require("../assets/images/banner-2.png"),
        require("../assets/images/banner-3.png"),
      ],

      //登录表单数据
      logindata: {
        username: "",
        password: "",
        identifydata: "",
      },

      identifyCode: "",
      identifyCodes: "1234567890",

      loading: false,

      //表单验证
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        identifydata: [
          { required: true, trigger: "blur", validator: validateVerifycode },
        ],
      },
    };
  },

  methods: {
    //提交登录
    submitForm(data) {
      var aa = { userid: data.username, password: data.password };

      this.$refs.loginForm.validate((res) => {
        if (res) {
          this.loading = true;
          this.$api.user
            .login(data)
            .then((result) => {
              console.log(result);
              this.loading = false;
              if (result.code == 200) {
                // this.$message.success("登录成功");
                this.$store.commit("initUserInfo", result.user);
                this.$store.commit("setProjecInfo", {
                  projectName: "北京城市副中心站综合交通枢纽",
                });
                window.sessionStorage.setItem("token", result.token);

                if (result.user.roleId === 10) {
                  this.$router.push("/3ddisplay");
                } else {
                  this.$router.push("/main");
                }
              } else {
                this.$message.error("登录失败,请检查用户名或密码");
              }
            })
            .catch((err) => {
              this.loading = false;
              console.log(err);
              this.$message.error("登录失败");
            });
        }
      });
    },

    //重置表单
    resetForm() {
      this.$refs.loginForm.resetFields();
    },

    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    },

    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
  },

  //生命周期钩子
  mounted() {
    // 验证码初始化
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },

  created() {
    let that = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key === 13) {
        that.submitForm(that.logindata);
      }
    };
  },
};
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
  background-image: url("../assets/images/img_login_bg.png");
  background-size: 100%;
  background-color: #2b4b6b;
}

.login-box {
  width: 1000px;
  height: 500px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-row {
    margin-bottom: 20px;
    height: 100%;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    height: 100%;
    .grid-content {
      border-radius: 10px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 2px 2px;

      // .el-carousel{
      //   height: 100%;
      // }

      // .el-carousel__container{
      //   height: 90%;
      //   position: static !important;
      // }

      .el-carousel__item {
        height: 100%;
      }

      .el-image {
        border-radius: 5px;
        height: 100%;
      }

      .sys-logo {
        width: 100%;
        text-align: center;
        .el-image {
          border-radius: 10%;
        }
      }
    }
  }

  .el-form {
    box-sizing: border-box;

    .identifybox {
      display: flex;
      justify-content: space-between;
      margin-top: 7px;
    }
  }

  .brower-tip {
    color: red;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    font-size: 12px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>